<template>
  <el-main>
    <!--          <pre><h1>今日新帖：9  活跃人数：23   帖子总数：320</h1></pre>-->
    <!--          帖子搜索筛选框-->
    <el-form
      ref="Post_queryForm"
      :model="BBSqueryParams"
      :inline="true"
      label-width="68px"
      label-position="right"
    >
      <el-form-item
        label="标题"
        label-width="40px"
      >
        <el-input
          v-model="BBSqueryParams.title"
          clearable
          size="small"
          style="width: 160px"
          @keyup.enter.native="post_Query"
        />
      </el-form-item>
      <el-form-item
        label="发帖人"
        label-width="60px"
      >
        <el-input
          v-model="BBSqueryParams.author"
          clearable
          size="small"
          style="width: 100px"
          @keyup.enter.native="post_Query"
        />
      </el-form-item>
      <el-form-item label="发帖时间">
        <el-date-picker
          v-model="BBSqueryParams.create_time"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="post_Query"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetMemberQuery"
        >重置</el-button>
        <!--              <el-button icon="el-icon-microphone" size="mini" type="warning">只看我的</el-button>-->
      </el-form-item>
    </el-form>
    <!--          左侧是新建，置顶，删除，禁言，右侧是我的发布，举报审核，禁言名单-->
    <el-row
      :gutter="10"
      class="mb8"
    >
      <el-col :span="8">
        <el-button
          type="success"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="new_post_dialog_flag = true"
        >新建</el-button>
        <el-button
          type="primary"
          plain
          icon="el-icon-upload2"
          size="mini"
          :loading="export_loading"
          @click="post_to_top"
        >置顶</el-button>
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="delete_cpc_post"
        >删除</el-button>
      </el-col>
      <el-col
        :span="8"
        :offset="8"
        class="right_float"
      >
        <el-button
          type="success"
          size="mini"
        >我的发布</el-button>
        <el-button
          type="warning"
          size="mini"
          @click="ban_dialog_flag = true"
        >禁言名单</el-button>
        <el-button
          type="danger"
          size="mini"
          @click="post_report_check_dialog_flag = true"
        >举报审核</el-button>
      </el-col>
    </el-row>
    <!--          帖子列表-->
    <el-table
      v-loading="query_loading"
      :data="post_list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
      />
      <el-table-column
        label="标题"
        align="center"
        prop="title"
      />
      <el-table-column
        label="发帖人"
        align="center"
        prop="author_name"
        width="120"
      />
      <el-table-column
        label="发帖时间"
        align="center"
        prop="create_time"
        width="150"
      />
      <el-table-column
        label="状态"
        align="center"
        prop="top_status"
        width="80"
      />
      <el-table-column
        label="查看数"
        align="center"
        prop="views"
        width="70"
      />
      <el-table-column
        label="互动数"
        align="center"
        prop="comments"
        width="70"
      />
      <el-table-column
        label="操作"
        align="center"
        width="220"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="view_post_dialog_flag = true"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="delete_cpc_post"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-warning-outline"
            @click="select_ban_time"
          >禁言</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="BBSqueryParams.pageNum"
      :limit.sync="BBSqueryParams.pageSize"
      @pagination="getList"
    />
    <!--        对话框-->
    <el-dialog
      :visible.sync="new_post_dialog_flag"
      title="新建论坛帖"
      center
    >
      <el-form
        :model="new_cpc_post_info"
        label-width="80px"
      >
        <el-form-item label="标题">
          <el-input v-model="new_cpc_post_info.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="new_cpc_post_info.content"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="添加图片">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否置顶">
          <el-switch
            v-model="new_cpc_post_info.top_status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
      <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <!--              <el-button @click="">添 加</el-button>-->
        <el-button @click="new_post_dialog_flag = false">取 消</el-button>
        <el-button
          plain
          type="primary"
          @click="create_cpc_post"
        >发 布</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="ban_dialog_flag"
      title="禁言名单"
      center
    >
      <el-table :data="ban_user_list">
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="free_time" label="解禁时间" width="200" />
        <el-table-column prop="reason" label="禁言原因" width="150" />
        <el-table-column
          label="操作"
          align="center"
          width="120"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-success"
              @click="cancel_ban"
            >解除禁言</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <!--              <el-button @click="">添 加</el-button>-->
        <el-button @click="ban_dialog_flag = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="post_report_check_dialog_flag"
      title="帖子举报审核"
      center
    >
      <el-table :data="report_post_list">
        <el-table-column prop="author_name" label="发布者" width="70" />
        <el-table-column prop="title" label="标题" width="150">
          <template slot-scope="scope">
            <a @click="view_post_dialog_flag = true">{{
              scope.row.title
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="举报类型" width="80" />
        <el-table-column prop="info" label="举报理由" />
        <el-table-column prop="state" label="状态" width="80" />
        <el-table-column
          label="操作"
          align="center"
          width="100"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state === '未处理'"
              size="mini"
              type="text"
              style="color: rgb(19, 206, 102)"
              icon="el-icon-success"
              @click="reject_report"
            >驳回举报</el-button>
            <el-button
              v-if="scope.row.state === '未处理'"
              size="mini"
              type="text"
              style="color: red"
              icon="el-icon-error"
              @click="delete_cpc_post"
            >删除帖子</el-button>
            <el-button
              v-if="scope.row.state === '未处理'"
              size="mini"
              type="text"
              style="color: gray"
              icon="el-icon-error"
              @click="select_ban_time"
            >禁言</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="post_report_check_dialog_flag = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="view_post_dialog_flag"
      title="帖子详情"
      center
    >
      <el-row style="margin-bottom: 20px">
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">标题: </div>
        </el-col>
        <el-col span="20">
          <div>测试测试测试测试</div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">正文: </div>
        </el-col>
        <el-col span="20">
          <div>6日，恐龙足迹研究团队宣布在四川古蔺县黄荆镇原林村的金鱼溪发现了一批恐龙足迹。这些恐龙足迹为实雷龙足迹的一个新种，并命名为野比氏实雷龙足迹。<br>测试测试测试测试<br>测试测试测试测试</div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">图片: </div>
        </el-col>
        <el-col span="20">
          <el-image
            style="width: 100px; height: 100px; "
            :src="url"
            :preview-src-list="srcList"
            z-index="10000"
          />
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">评论: </div>
        </el-col>
        <el-col span="20">
          <el-table
            :data="comment_list"
            style="width: 100%"
            max-height="150px"
            :cell-style="{padding: '5px 0'}"
          >
            <el-table-column
              prop="time"
              label="时间"
              width="180px"
            />
            <el-table-column
              prop="name"
              label="姓名"
              width="80px"
            />
            <el-table-column
              prop="content"
              label="评论"
            />
          </el-table>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="view_post_dialog_flag = false">关 闭</el-button>
      </span>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  name: 'Bbs',
  data() {
    return {
      query_loading: false,
      export_loading: false,
      new_post_dialog_flag: false,
      ban_dialog_flag: false,
      post_report_check_dialog_flag: false,
      view_post_dialog_flag: false,
      BBSqueryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        author: undefined,
        create_time: undefined
      },
      new_cpc_post_info: {
        title: '',
        content: '',
        pic: [],
        top_status: false
      },
      post_list: [
        {
          post_id: '2000019349401',
          title: '测试标题测试测试标题测试测试标题测试',
          author_id: '20123',
          author_name: '赵德胤',
          create_time: '2021-6-12 13:15:23',
          views: 55,
          comments: 5,
          top_status: '置顶'
        },
        {
          post_id: '2000019349401',
          title: '测试标题测试测试标题测试',
          author_id: '20113',
          author_name: '李明英',
          create_time: '2021-6-10 10:23:00',
          views: 130,
          comments: 13,
          top_status: ''
        }
      ],
      comment_list: [
        {
          time: '2021-6-10 10:20:19',
          name: '王清峰',
          content: '这个新闻被辟谣了是假的',
        },
        {
          time: '2021-6-12 15:20:19',
          name: '李志新',
          content: '真的吧，抖音都发了',
        },
        {
          time: '2021-6-10 10:20:19',
          name: '王清峰',
          content: '这个新闻被辟谣了是假的',
        },
        {
          time: '2021-6-12 15:20:19',
          name: '李志新',
          content: '真的吧，抖音都发了',
        },
        {
          time: '2021-6-10 10:20:19',
          name: '王清峰',
          content: '这个新闻被辟谣了是假的',
        },
        {
          time: '2021-6-12 15:20:19',
          name: '李志新',
          content: '真的吧，抖音都发了',
        },
        {
          time: '2021-6-10 10:20:19',
          name: '王清峰',
          content: '这个新闻被辟谣了是假的',
        },
        {
          time: '2021-6-12 15:20:19',
          name: '李志新',
          content: '真的吧，抖音都发了',
        }
      ],
      ban_user_list: [
        {
          name: '李大壮',
          free_time: '2021-7-15 00:00:00',
          reason: '发布欺诈信息'
        },
        {
          name: '郑晓梅',
          free_time: '2021-7-30 00:00:00',
          reason: '发布反动信息'
        },
      ],
      report_post_list: [
        {
          title: '测试标题测试测试标题测',
          author_id: '20123',
          author_name: '赵德胤',
          create_time: '2021-6-20 13:15:23',
          views: 55,
          comments: 5,
          reason: '不实信息',
          info: '这条信息已经被央视辟谣了',
          state: '未处理'
        },
        {
          title: '测试标题测试测试标题测试测试标题测试',
          author_id: '20123',
          author_name: '赵德胤',
          report_time: '2021-6-12 13:15:23',
          views: 55,
          comments: 5,
          reason: '反动信息',
          info: '帖子有宣扬邪教的嫌疑',
          state: '已处理'
        },
      ],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      ],
    }
  },
  methods: {

    getList() {
      this.query_loading = true
      console.log('query')
      this.query_loading = false
    },

    post_Query() {
      this.Post_queryParams.page = 1
      this.get_cpc_list()
    },

    resetMemberQuery() {
      console.log('reset query info')
    },

    post_to_top() {
      this.$message({
        message: '置顶操作成功!',
        type: 'success'
      })
    },

    delete_cpc_post() {
      this.$confirm('删除该条论坛帖, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    create_cpc_post() {
      this.new_post_dialog_flag = false
      this.$message({
        message: '成功发布党员论坛帖!',
        type: 'success'
      })
    },

    cancel_ban() {
      this.$message({
        message: '解除禁言成功!',
        type: 'success'
      })
    },

    reject_report() {
      this.$message({
        type: 'info',
        message: '已驳回该举报'
      })
    },

    select_ban_time() {
      this.$confirm('该用户将被禁言7天, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '禁言成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁言'
        })
      })
    },
  }
}
</script>

<style scoped>

</style>
